<template>
  <div class="job-item" @click="handleDetail">
    <div class="flex justify-between items-center">
      <div class="text-4xl flex items-center">
        <img
          class="w-16 h-16 block rounded-1 mr-4 border-gray-300 border-1 border-solid"
          :src="jdata.brandLogo"
          alt=""
        />
        {{ jdata.brandName }}
      </div>
      <i class="iconfont icon-bookmark-o"></i>
    </div>
    <h3 class="text-5xl mt-10">{{ jdata.jobName }}</h3>
    <p class="text-4xl mt-6 mb-6">
      {{ jdata.cityName }}·{{ jdata.areaDistrict }}
    </p>
    <p class="text-4xl text-orange-400">{{ jdata.salaryDesc }}</p>
    <div class="mt-8">
      <i class="iconfont icon-renqun mr-4"></i>
      80
      <i class="iconfont icon-browse mr-4 ml-8"></i>
      100
    </div>
  </div>
</template>

<script setup lang="ts">
import { JobType } from "../types/job";
import { useRouter } from "vue-router";
const router = useRouter(); //Hook
type JobItemProps = {
  jdata: JobType;
};
const props = defineProps<JobItemProps>(); //只有js区域需要的时候，才需要定义props

const handleDetail = () => {
  router.push(`/detail/${props.jdata.objectId}`);
};
</script>

<style scoped>
.job-item {
  width: 28.4rem;
  height: 23.2rem;
  padding: 3rem;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 1);
  border: 0.2rem solid rgba(238, 238, 238, 1);
  /* border: 0.2rem solid red; */
  margin-bottom: 2rem;
  flex-shrink: 0;
}
</style>
